<!DOCTYPE html>
<html>

<!--包含头部-->
{include file='head'}


<section class="rt_wrap content mCustomScrollbar">
    <div class="rt_content">
        <div class="page_title">
            <h2 class="fl">添加管理员</h2>
        </div>

        <!--添加会员的信息-->
        <ul class="ulColumn2">
            <li>
                <span class="item_name" style="width:120px;">角色名称：</span>
                <input type="email" class="textbox textbox_225"  placeholder="角色名称..." name="role" maxlength="10"/>
                <span class="tips"></span>
            </li>

            <li>

            <span class="item_name" style="width:120px;">角色权限：</span>
            <li>
            <span class="item_name" style="width:100px;"></span>

            {if $authRule}
            {foreach $authRule as $rule}

                    <input style="margin-top:20px;" type="checkbox" name="rules[{$rule['id']}]" value="{$rule['id']}" class="chance">

            <input type="text" class="textbox" value="{$rule['title']}" readonly/>
            <span class="item_name" style="width:100px;"></span>
            {/foreach}

             </li>

            <li>
                <span class="item_name" style="width:120px;"></span>
                <input type="button" class="link_btn" value="添加" name="btn"/>
                {else}
                <h1 style="padding-left:200px;color:red;">请先添加权限,再操作</h1>

                {/if}
            </li>
        </ul>
    </div>
</section>
</body>
</html>
<script>

    //提交数据
    $(function () {

        var $role = null;
        var $arr  = [];
        var $value1 = null;
        var $name  = null;
        var $total = null;
        var fName = false;

            //角色名称
        $('[name=role]').blur(function () {

            //取值
            $role = $(this).val().replace(/(^\s*)|(\s*$)/g, "");

            //是否为空
            if ($role.length <= 0 || $role.length > 10) {

                $('.tips').eq(0).addClass('errorTips').html('角色名称不得为空,且必须为1~10个字符(可用汉字)').css('color','red');
                fName = false;
                return false;
            }

            fName = true;
            //$('.tips').eq(0).html('角色名称合法').css('color','green');
            if (fName) {

                //ajax查看角色名是否已存在
                $.post('username',{username:$role},success,'json');
            }
        });

        //复选框
        $('.chance').click(function () {

            $value1 = $(this)[0].checked;
            $name = $(this).attr('name');

            //初始化
            delete $arr[$name];

            //若选中
            if ($value1) {

                $arr[$name] = $(this).val();
            }

            //console.log($value1);
            //console.log($name);
            //console.log($arr);
        });


        //按钮点击事件
        $('[name=btn]').click(function () {

            //角色名是否合法
            if (!fName) {
                $('.tips').eq(0).html('请先按要求填写角色名').css('color','red');
                return false;
            }

            //判断勾选的复选框个数
            if (Object.keys($arr).length <= 0) {

                alert('请选择要添加的权限');
                return false;
            }

            //将数组转换为字符串
            var $params = [];
            for (var $k in $arr) {

                var $values = $arr[$k];
                $params.push($values);
                //console.log($values);
            }
            var $str = $params.join();  //拼接成字符串

            console.log(fName);
            console.log($('[type=checkbox]').length);
            console.log($params);
            console.log($str);

            //ajax传输
            $.post('add',{role:$role,rules:$str},success,'json');

        });

        //回调函数
        function success(data)
        {
            console.log(data);

            switch (data.state) {
                //角色名存在,不合法
                case 1:
                    fName = false;
                    $('.tips').eq(0).addClass('errorTips').html('角色名已存在').css('color','red');
                    break;
                //角色名不存在,合法
                case 2:
                    $('.tips').eq(0).addClass('errorTips').html('角色名合法').css('color','green');
                    break;

                case 3:
                    alert(data.tip);
                    //重载当前页面
                    window.location.reload();
                    break;
                case 4:
                    alert(data.tip);
                    //重载当前页面
                    window.location.reload();
                    break;
            }

        }
    });

</script>
